<template>
    <div class="page">
        <!-- 轮播 -->
        <van-swipe class="swiper" :autoplay="3000" indicator-color="white">
            <van-swipe-item class="swiper-item" v-for="(item, index) in goods.photo" :key="index"><img :src="item.img" alt=""></van-swipe-item>
        </van-swipe>
        <van-icon @click="goToBack()" class="fang" name="arrow-left" />

        <!-- 抢购 -->
        <div class="qianggou" v-if="time">
            <div class="qianggou-left">
                <span>限时抢购</span>
                <span>限量{{goods.store_nums}}份</span>
            </div>
            <div class="qianggou-right">
                <van-icon name="clock-o" style="margin-right:0.1rem; font-size:0.3rem;"/>
                <span v-if="isTimeing">距离结束只剩</span>
                <count-down :endTime="endTime" :callback="timecallback" endText="活动已经结束了"></count-down>
            </div>
        </div>

        <div class="product-tip">
            <!-- 价格 -->
            <div class="prise">
                <div class="prise-left">
                    <span>￥</span>
                    <span>{{goods.sell_price}}</span>
                    <span>￥{{goods.market_price}}</span>
                    <span>新人专享</span>
                </div>
                <div class="prise-right">
                    月销{{goods.sale}}
                </div>
            </div>
            <!-- 升级会员 -->
            <div class="Upgrade" @click="buyVip()">
                <div class="UpgradeContent">
                    <div class="UpgradeContent-left">赚更多</div>
                    <div class="UpgradeContent-middle">升级会员赚<span>￥5.88</span>元起</div>
                    <div class="UpgradeContent-right">立即升级></div>
                </div>
            </div>
            <!-- 商品标题 -->
            <div class="productTitle">
                <p>{{goods.name}}</p>
                <p>{{goods.category_name}}</p>
            </div>
        </div>
        <div class="null"></div>
        <div class="productChoose">
            <div class="productChoose-item" @click="openJifen">
                <div class="productChoose-item-left">优惠</div>
                <div class="productChoose-item-right">购买可获得{{goods.point}}积分<span>积分</span></div>
            </div>
            <div class="productChoose-item" @click="openChooseGuige">
                <div class="productChoose-item-left" >规格</div>
                <div class="productChoose-item-right">请选择></div>
            </div>
            <!-- <div class="productChoose-item">
                <div class="productChoose-item-left">送至</div>
                <div class="productChoose-item-right">请选择配送区域></div>
            </div> -->
            <div class="serve" @click="openFuwu">
                <div class="serve-item">
                    <span></span>
                    <span>7天内发货</span>
                </div>
                <div class="serve-item">
                    <span></span>
                    <span>正品包邮</span>
                </div>
                <div class="serve-item">
                    <span></span>
                    <span>30天退换</span>
                </div>
                <div class="serve-item">
                    <span></span>
                    <span>满88免邮</span>
                </div>
            </div>
        </div>
        <div class="null"></div>
        <div class="comment" v-if="false">
            <div class="comment-top">
                <span>宝贝评价</span>
                <span>查看全部></span>
            </div>

            <div class="comment-tip">
                <div class="comment-tip-left">
                    <img src="@/assets/1.png" alt="">
                    <span>xxxxxxx</span>
                    <van-rate />
                </div>
                <div class="comment-tip-right">
                    2019-10-1
                </div>

            </div>
            <div class="comment-content">
                    内容内容
            </div>
            <div class="comment-img">
                <img src="@/assets/1.png" alt="">
                <img src="@/assets/1.png" alt="">
                <img src="@/assets/1.png" alt="">
            </div>
            <div class="comment-guige">
                黑色：L
            </div>
        </div>
        <div class="comment" v-else>
            <!-- <div class="comment-top">
                <span>宝贝评价</span>
                <span @click="goToDetails(2)">查看全部></span>
            </div> -->
            <div class="comment-top">
              <span>商品详情</span>
            </div>
            <!-- <div style="text-align:center; padding:0.8rem; color: #B3B5B8;">本商品暂无评价</div> -->
            <div v-html='html' class="details-img-337854828"></div>
        </div>
        <div class="null"></div>
        <div class="tuijian" v-if="hasRecommend">
            <p class="tuijian-title">为您推荐</p>
            <div class="tuijian-all">
                <a class="tuijian-item" v-for="(item, index) in recommend" :key="index" @click="goThisPage(item)">
                    <img :src="item.img" alt="">
                    <p class="tuijian-item-title">{{item.name}}</p>
                    <div class="tuijian-item-bottom">
                        <span>￥{{item.sell_price}}</span>
                        <span>￥{{item.market_price}}</span>
                    </div>
                </a>
            </div>
        </div>
        <!-- <div class="goToDetails" @click="goToDetails(1)">
          点击查看更多详情
        </div> -->
        <div class="goods-action">
            <div class="goods-action-left">
              <div class="goods-action-left-item" @click="customerService()">
                <img src="../../assets/kefu.png" alt="">
                <div>客服</div>
              </div>
              <div class="goods-action-left-item" @click="goToShopingCar()">
                <img src="../../assets/gouwuche.png" alt="">
                <div>购物车</div>
              </div>
              <div class="goods-action-left-item" @click="collection()">
                <img src="../../assets/shoucang.png" alt="" v-if="goods.is_favorite == 0">
                <img src="../../assets/shoucang2.png" alt="" v-else>
                <div>收藏</div>
              </div>
            </div>
            <div class="goods-action-right" @click="openChooseGuige">
              <div class="goods-action-right-item goods-action-right-item-left">加入购物车</div>
              <div class="goods-action-right-item goods-action-right-item-right">
                <div class="goods-action-right-d">
                  <span>立即购买</span>
                  <span>赚{{Math.floor(Math.random()*10+1)}}元</span>
                </div>
              </div>
            </div>
        </div>
        <!-- 选择产品的规格 -->
        <div class="pruduct-guige" v-if="chhooseguige_show">
            <div class="guige-content">
                <div class="guige-content-top">
                    <div class="guige-content-top-left">
                        <img :src="goods.photo[0].img" alt="">
                        <div class="guige-prise">
                            <p class="guige-prise-number">
                                <span>{{goods.sell_price}}</span>
                                <span>{{goods.market_price}}</span>
                            </p>
                            <p class="kucun">库存：{{goods.store_nums}}</p>
                        </div>
                    </div>
                    <van-icon name="cross" class="cross-icon" @click="closeChooseGuige" />
                </div>

                <div class="pruduct-guige-size" v-if='isProductTwo'>
                    <p>{{Object.values(goods.spec_array)[1].name}}</p>
                    <div class="choosesize">
                        <span v-for="(item, index) in size" :key="index" v-bind:class="index == sizeIndex ? 'choosesize-active' : ''" v-on:click="chooseSize(index)">{{Object.keys(item)[0]}}</span>
                    </div>
                </div>

                <div class="pruduct-guige-color">
                    <p>{{Object.values(goods.spec_array)[0].name}}</p>
                    <div class="choosecolor">
                        <span v-for="(item, index) in color" :key="index" v-bind:class="index == colorIndex ? 'choosecolor-active' : ''"
                              v-on:click="chooseColor(index)">{{Object.keys(item)[0]}}</span>
                    </div>
                </div>

                <div class='product-shuliang'>
                    <span>数量</span>
                    <van-stepper v-model="count" :max="goods.store_nums" />
                </div>
                <div class="pay-button">
                    <a @click="addShopingCar()">加入购物车</a>
                    <a @click="goOder()">立即购买</a>
                </div>
            </div>
        </div>

        <!--单规格商品弹窗-->
        <div class="pruduct-guige" v-if="danGuiGe">
                <div class="guige-content">
                <div class="guige-content-top">
                    <div class="guige-content-top-left">
                        <img :src="goods.photo[0].img" alt="">
                        <div class="guige-prise">
                            <p class="guige-prise-number">
                                <span>{{goods.sell_price}}</span>
                                <span>{{goods.market_price}}</span>
                            </p>
                            <p class="kucun">库存：{{goods.store_nums}}</p>
                        </div>
                    </div>
                    <van-icon name="cross" class="cross-icon" @click="closeChooseGuige" />
                </div>

                <div class='product-shuliang'>
                    <span>数量</span>
                    <van-stepper v-model="count" :max="goods.store_nums" />
                </div>
                <div class="pay-button">
                    <a @click="addShopingCar()">加入购物车</a>
                    <a @click="goOder()">立即购买</a>
                </div>
            </div>
        </div>
        <!--单规格商品选数量结束-->



        <!-- 积分弹窗 -->

        <div class="pruduct-youhui" v-if="jifen_show">
            <div class="youhui-content">
                <div class="youhui-content-top">
                    <div class="guige-null"></div>
                    <div class="">优惠</div>
                    <van-icon name="cross" class="cross-icon"  @click="closeJifen"/>
                </div>
                <div class="youhui-content-bottom">
                    <img src="@/assets/jifen.png" alt="">
                    <p>购买可获得<span>{{goods.point}}</span>积分</p>
                    <p>积分介绍信息，积分介绍信息</p>
                </div>
            </div>
        </div>
        <!-- 服务保障弹窗 -->
        <div class="pruduct-fuwu"  v-if="fuwubaozhang_show">
            <div class="fuwu-content">
                <div class="fuwu-content-top">
                    <div class="guige-null"></div>
                    <div class="">服务保障</div>
                </div>
                <div class="fuwu-all">
                    <div class="fuwu-item">
                        <div class="fuwu-item-top">
                            <span></span>
                            <span>7天内发货</span>
                        </div>
                        <div class="fuwu-item-bottom">积分介绍信息，积分介绍信息</div>
                    </div>
                    <div class="fuwu-item">
                        <div class="fuwu-item-top">
                            <span></span>
                            <span>正品包邮</span>
                        </div>
                        <div class="fuwu-item-bottom">积分介绍信息，积分介绍信息</div>
                    </div>
                    <div class="fuwu-item">
                        <div class="fuwu-item-top">
                            <span></span>
                            <span>30天退换</span>
                        </div>
                        <div class="fuwu-item-bottom">积分介绍信息，积分介绍信息</div>
                    </div>
                    <div class="fuwu-item">
                        <div class="fuwu-item-top">
                            <span></span>
                            <span>满88包邮</span>
                        </div>
                        <div class="fuwu-item-bottom">积分介绍信息，积分介绍信息</div>
                    </div>
                </div>
                <div class="fuwu-button" @click="closeFuwu">
                    完成
                </div>
            </div>
        </div>
        <!-- 客服弹窗 -->
        <div>
          <van-dialog
            v-model="showCustomerService"
            title="联系客服"
            :closeOnClickOverlay="showCustomerService"
            confirm-button-text="确定"
            cancel-button-text="取消"
            @confirm="callUs()"
            show-cancel-button
          >
            <div class="CustomerService">
              <div class="CustomerService-c">
                <div>电话：</div>
                <div>400-100-888</div>
              </div>
              <div class="CustomerService-c">
                <div>微信：</div>
                <div>yijianyoupin</div>
              </div>
            </div>
          </van-dialog>
        </div>
    </div>
</template>

<script>
    import request from '../../../static/request.js'
    import Qs from 'qs'

    import { Notify } from 'vant';
    import { Dialog } from 'vant';

    import countDown from '@/components/daojishi/daojishi'

    export default {
        name: "ProductDetails",
        data() {
            return {
              goodsId: '', // 单规格商品ID或商品原始ID
              goodsProductId: '', // 多规格商品ID
              isProduct: true, // 判断是否是多规格商品
              isProductTwo: false ,// 判断是否是多规格商品二
              count: 1, // 商品数量
              chhooseguige_show: false,//选择规格是否显示
              danGuiGe: false, // 无规格商品选择规格是否显示
              jifen_show: false,//积分窗口是否显示
              fuwubaozhang_show: false,
              goods: {},
              recommend: [], //为你推荐
              buyLimit: 1, // 商品购买限制

              color: [],
              colorIndex: 0, // 动态设置CLASS
              size: [],
              sizeIndex: 0, // 动态设置CLASS

              // 多规格商品二
              goodsProductArr: [],

              // 多规格商品一
              productOne: [],

              page:0,

              // 商品规格 0 单规格 1 多规格
              goodsProduct: null,

              //商品详情
              html: null,

              /**
               * 以下为活动类型判断
               */
              time: false, //抢购活动
              isTimeing: true, //活动是否进行中
              endTime: 0,

              hasRecommend: true,
              showCustomerService: false
            }
        },
        created(){
          // 通过url获取ID，或者通过路由获取商品ID
          let data = this.getUrlParam(window.location.href)
          let id = null

          if(Object.keys(data).length == 0){
            id = this.$route.params.id
          }else{
            id = data.id
          }

          this.page = this.$route.params.page;

          // 返回或刷新也有数据
          if(!id){
            id = localStorage.getItem('getthisid')
          }
          localStorage.setItem('getthisid', id)

          // 获取商品详情数据
          this.getGoodsInfo(id)

        },
        updated(){
          window.scrollTo(0, 0)
        },

        // 方法
        methods: {
          goToBack(){
            // if(this.page == 1){
            //   this.$router.push('/');
            // }else if(this.page == 2){
            //   this.$router.push('/Mall');
            // }else{
            //   this.$router.push('/');
            // }
            this.$router.go(-1)
          },

          // 获取详细的商品信息
          getGoodsInfo(id){
            request({
              url: '?controller=theapi&action=goods',
              method: 'get',
              params: {
                gid: id
              }
            }).then(res=>{
              // 判断商品活动是否失效 hank用户时差
              if(res.data.data == ''){
                if(res.data.return_message == '这件商品不存在或已下架'){
                  Dialog.alert({
                    title: '提示',
                    message: '该商品已下架'
                  }).then(() => {
                    //this.$router.back()
                    this.$router.push('Mall')
                  });
                }else if(res.data.return_message == '团购活动不存在'){
                  Dialog.alert({
                    title: '提示',
                    message: '团购活动已结束'
                  }).then(() => {
                    //this.$router.back()
                    this.$router.push('Mall')
                  });
                }
              }
              console.log(res)
              let guige = res.data.data.spec_array
              let arr = []
              let arr2 = [{},{}]
              // 单规格商品
              if(guige == null){
                this.isProduct = false;
                this.goodsProduct = 0;
                this.goods = res.data.data
                this.goodsProductId = res.data.data.id
                this.html = res.data.data.content
                return
              }

              // 多规格
              console.log('多规格商品')
              this.goodsProduct = 1;
              Object.values(guige).forEach(item=>{
                arr.push(item)
              })

              arr.forEach((item, index)=>{
                arr2[index].id= item.id
                arr2[index].type = item.type
                arr2[index].value = Object.values(item.value[0])[0]
                arr2[index].name = item.name
                arr2[index].tip = Object.keys(item.value[0])[0]
              })
              // 多规格商品默认选中第一
              this.goodsProductArr = arr2

              this.color = arr[0].value
              // 判断是否有两个规格
              if(arr.length == 2){
                this.isProductTwo = true
                this.size = arr[1].value
              }
              this.goods = res.data.data
              this.goodsId = res.data.data.id
              this.html = res.data.data.content

              // 请求多规格商品的价格与ID
              this.getProduct(arr2)

              // 判断商品活动类型，抢购，团购，积分兑换
              if(res.data.data.active){
                //活动存在
                let data = res.data.data.active
                if(data.time){
                  // 限时抢购活动
                  let endTime = this.goods.active.time.end_time
                  this.time = true
                  // endTime
                  this.endTime = String(new Date(endTime.replace(/-/g, '/')).getTime()/1000)
                }
              }
            })
          },
          // 购买VIP
          buyVip(){
            window.location.href = 'http://app.ztsx123.com/1/#/fourteen'
          },
          // 打开规格弹窗
          openChooseGuige(){
            if(this.goodsProduct == 0){
              this.danGuiGe = true
            }else if(this.goodsProduct == 1){
              this.chhooseguige_show=true
            }
          },
          // 关闭规格弹窗
          closeChooseGuige(){
              this.chhooseguige_show=false,
              this.danGuiGe = false,
              this.danGuiGe = false
          },
          // 收藏与取消收藏
          collection(){
            let uri, message, is_favorite
            if(this.goods.is_favorite == 0){
              // 未收藏请求收藏
              uri = '?controller=theapi&action=favourite_add'
              message = '收藏成功'
              is_favorite = 1
            }else{
              uri = '?controller=theapi&action=refuse_favourite'
              message = '取消收藏'
              is_favorite = 0
            }
            request({
              url: uri,
              method: 'get',
              params: {
                gid: this.goodsId
              }
            }).then(res=>{
              if(res.data.data == '请先登录'){
                Dialog.alert({
                  message: '请先登录'
                }).then(() => {
                  //this.$router.back()
                  this.$router.push('login')
                });
              }else{
                this.goods.is_favorite = is_favorite
                Notify({
                  message: message,
                  duration: 1000,
                  background: '#F52E67'
                })
              }
            }).catch(err=>{
              console.log(err)
            })
          },
          goToShopingCar(){
            this.$router.push({
              name: 'ShoppingCart'
            })
          },
          // 打开积分弹窗
          openJifen(){
              this.jifen_show=true
          },
          // 关闭积分弹窗
          closeJifen(){
              this.jifen_show=false
          },
          // 打开积分弹
          openFuwu(){
              this.fuwubaozhang_show=true
          },
          // 关闭积分弹窗
          closeFuwu(){
              this.fuwubaozhang_show=false
          },

          // 选择颜色
          chooseColor(index){
            this.colorIndex = index
            let color = this.color
            let arr = this.goodsProductArr
            let goodsId = this.goodsId

            // arr[0]['specJSON[0][value]'] = Object.values(color[index])[0]
            // arr[0]['specJSON[0][tip]'] = Object.keys(color[index])[0]

            arr[0].value = Object.values(color[index])[0]
            arr[0].tip = Object.keys(color[index])[0]

            this.getProduct(arr)
          },
          // 选择尺码
          chooseSize(index){
            this.sizeIndex = index
            let size = this.size
            let arr = this.goodsProductArr
            let goodsId = this.goodsId

            arr[1].value = Object.values(size[index])[0]
            arr[1].tip = Object.keys(size[index])[0]


            this.getProduct(arr)
          },

          // 上拉查看商品详情,或进入到评论
          goToDetails(sign){
            this.$router.push({
              name: 'ProductMore',
              params: {
                content: this.goods.content,
                sign: sign
              }
            })
          },
          // 抢购倒计时结束的回调
          timecallback(){
              console.log('已结束')
              this.isTimeing = false
          },

          // 立即购买
          goOder(){
            if(this.count < this.buyLimit){
              this.$dialog.alert({
                title: "提示", //加上标题
                message: `商品${this.buyLimit}件起购`, //改变弹出框的内容
                showCancelButton: true //展示取水按钮
              }).then(()=>{
                return
              })
            }
            // 判断是否是多规格商品
            if(this.isProduct){
              this.$router.push({
                name:'order1',
                params:{
                  gid: this.goodsProductId,
                  type: 'product',
                  num: this.count,
                  page:2
                }
              })
            }else{
              // 单规格
              console.log({
                gid: this.goodsProductId,
                type: 'goods',
                num: this.count
              })
              this.$router.push({
                name:'order1',
                params:{
                  gid: this.goodsProductId,
                  type: 'goods',
                  num: this.count,
                  page:2
                }
              })
            }
          },
          //加入购物车
          addShopingCar(){
            if(this.count < this.buyLimit){
              this.$dialog.alert({
                title: "提示", //加上标题
                message: `商品${this.buyLimit}件起购`, //改变弹出框的内容
                showCancelButton: true //展示取水按钮
              }).then(()=>{
                return
              })
            }
            // 判断是否是多规格商品
            if(this.isProduct){
              // 多规格
              request({
                url: '?controller=theapi&action=joinCart',
                method: 'get',
                params: {
                  goods_id: this.goodsProductId,
                  goods_num: this.count,
                  type: 'product'
                }
              }).then(res=>{
                if(res.data.data == '请登录'){
                  Dialog.alert({
                    message: '请先登录'
                  }).then(() => {
                    //this.$router.back()
                    this.$router.push('login')
                  });
                }else{
                  Notify({
                    message: '加入购物车成功',
                    duration: 1000,
                    background: '#F52E67'
                  })
                }
              })
            }else{
              // 单规格
              request({
                url: '?controller=theapi&action=joinCart',
                method: 'get',
                params: {
                  goods_id: this.goodsProductId,
                  goods_num: this.count,
                  type: 'goods'
                }
              }).then(res=>{
                Notify({
                  message: '加入购物车成功',
                  duration: 1000,
                  background: '#F52E67'
                })
              })
            }
          },
          // 为你推荐商品点击请求，仍然在此页面
          goThisPage(item){
            this.getGoodsInfo(item.id)
          },

          // 获取多规格商品价格与ID
          getProduct(arr){
            // console.log(arr)
            let data = {}
            let arr2 = []

            // 倒排序，hank 后台
            arr2.push(arr[1])
            arr2.push(arr[0])

            if(this.isProductTwo){
              data.specJSON = arr2
              console.log(data.specJSON)
            }else{
              data.specJSON = arr2.splice(0, 1)
            }
            data.goods_id = this.goodsId
            console.log(data)
            data = Qs.stringify(data)
            request({
              url: '?controller=theapi&action=getProduct',
              method: 'post',
              data: data,
              header: {'Content-Type': 'application/x-www-form-urlencoded'} // 模拟form表单方式提交请求
            }).then(res=>{
              console.log(res)
              this.goodsProductId = res.data.data.id
              this.goods.market_price = res.data.data.market_price
              this.goods.sell_price = res.data.data.sell_price
              this.goods.store_nums = res.data.data.store_nums
            })
          },
          // 客服
          customerService(){
            this.showCustomerService = true
          },
          //callUs
          callUs(){

          },
          // 获取URL传过来的参数
          getUrlParam(sUrl, sKey) {
            var result = {}
            sUrl.replace(/\??(\w+)=(\w+)&?/g,function(all, key, value){

                if(result[key] !== void 0){
                    var t = result[key]
                    result[key] = [].concat(t,value)
                }else{
                    result[key] = value
                }
            })
            if(sKey === void 0){
                return result;
            }else{
                return result[sKey] || ''
            }
          }
        },
        // 挂在后请求为你推荐
        mounted(){
          this.$nextTick(()=>{
            // 获取为您推荐数据
            request({
              url: '?controller=theapi&action=goods_list',
              method: 'get',
            }).then(res=>{
              console.log(res)
              // 推荐商品不存在
              if(res.data.data == 0){
                this.hasRecommend = false
                return
              }
              let data = res.data.data
              data.forEach(item=>{
                if(item.name.length > 13){
                  item.name = item.name.slice(0, 18) + '...'
                }
              })
              this.recommend = data
            }).catch(err=>{
              console.log(err)
            })
          })
        },
        // 注册组件
        components:{
          countDown
        }
      };
</script>

<style scoped>
    .null{
        background: #F5F6F7;
        height: 0.2rem;
    }
    /* 轮播图 */
    .swiper{
        height: 7.5rem;
    }
    .swiper-item{
        background: #ffffff;
        color: white
    }
    .swiper-item img{
        width: 100%;
    }

    /* 抢购 */
    .qianggou{
        margin: 0.2rem 0.3rem -0.1rem 0.3rem;
        display: flex;
        height: 1rem;
        justify-content: space-between;
        align-items: center;
        background-image: url(../../assets/qianggou.png);
        background-size: 100% 100%;
    }
    .qianggou-left{margin-left: 0.35rem;}
    .qianggou-left span:nth-child(1){
        color: white;
        font-size: 0.3rem;
    }
    .qianggou-left span:nth-child(2){
        color: white;
        font-size: 0.28rem;
    }
    .qianggou-right{
        display: flex;
        align-items: center;
        margin-right: 0.2rem;
        color: white;
        font-size: 0.26rem;
    }

    /* 价格 */
    .fang{
      position: absolute;
      font-size: 0.4rem;
      top: 0.23rem;
      left: 0.2rem;
      width: 0.5rem;
      height: 0.9rem;
      /* z-index: 111; */
    }
    .product-tip{
        padding: 0.5rem 0.3rem;
        padding-top:0.1rem;
    }
    .prise{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.35rem;
    }
    .prise-left span:nth-child(1){
        color: #F52E67;
        font-size: 0.3rem;
    }

    .prise-left span:nth-child(2){
        color: #F52E67;
        font-size: 0.35rem;
    }
    .prise-left span:nth-child(3){
        color: #B3B5B8;
        font-size: 0.26rem;
        text-decoration:line-through;
        margin-left: 0.2rem;
    }
    .prise-left span:nth-child(4){
        background: #F52E67;
        color: white;
        font-size: 0.25rem;
        border-radius:0.2rem;
        padding: 0.05rem 0.2rem;
        margin-left: 0.2rem;
    }
    .prise-right{
        color: #9FA0A5;
        font-size: 0.22rem;
    }
    /* 升级会员 */
    .Upgrade{
        margin-top: 0.3rem;
    }
    .UpgradeContent{
        height: 1rem;
        background: #EBC993;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.2rem;
        border-radius:0.16rem;
    }
    .UpgradeContent-left{
        color: white;
        font-size: 0.26rem;
        width:1.11rem;
        line-height:0.45rem;
        text-align: center;
        background:#F6E3BE;
        border-radius:23px;
    }
    .UpgradeContent-middle{
        color: #412A00;
        font-size: 0.28rem;
        margin-left: -1rem;
    }
    .UpgradeContent-middle span{
        color: #F52E67
    }
    .UpgradeContent-right{
        color: #412A00;
        font-size: 0.26rem;
    }
    /* 商品标题 */
    .productTitle{
        margin-top: 0.2rem;
    }
    .productTitle p:nth-child(1){
        color: #191E2A;
        font-size: 0.3rem;
    }
    .productTitle p:nth-child(2){
        color: #B3B5B8;
        font-size: 0.28rem;
        margin-top: 0.1rem;
    }
    /* 选择规格 */
    .productChoose{
        padding-left: 0.3rem;
    }
    .productChoose-item{
        display: flex;
        align-items: center;
        height: 0.9rem;
        justify-content: space-between;
        padding:0 0.2rem 0 0;
        border-bottom:0.01rem solid #EFF1F3;
    }
    .productChoose-item-left{
        font-size: 0.28rem;
        color: #191E2A;
    }
    .productChoose-item-right{
        font-size: 0.28rem;
        color: #9FA0A5;
    }
    .productChoose-item-right span{
        font-size: 0.2rem;
        color: #fff;
        background: #F52E67;
        padding: 0 0.1rem;
        margin-left: 0.2rem;
    }
    /* 服务 */
    .serve{
        display: flex;
        padding: 0.3rem 0.3rem 0.3rem 0;
        justify-content: space-between;
        font-size: 0.28rem;

    }
    .serve-item {
        display: flex;
        align-items: center;
    }
    .serve-item span:nth-child(1){
        width: 0.1rem;
        height: 0.1rem;
        background: #F52E67;
        margin-right: 0.1rem;
    }
    /* 评论 */
    .comment{
        padding: 0.3rem;

    }
    .comment-top{
        display: flex;
        justify-content: space-between;
    }
    .comment-top span:nth-child(1){
        font-size: 0.28rem;
        color: #191E2A;
    }
    .comment-top span:nth-child(2){
        font-size: 0.28rem;
        color: #9FA0A5;
    }
    .comment-tip{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.7rem;
    }
    .comment-tip-left{
        display: flex;
        align-items: center;
    }
    .comment-tip-left img{
        width: 0.56rem;
        height: 0.56rem;
        display: flex;
        align-items: center;
    }
    .comment-tip-left span:nth-child(2){
        margin-left: 0.2rem;
        margin-right: 0.2rem;

    }
    .comment-content{
        font-size: 0.28rem;
        padding: 0.2rem 0;
    }
    .comment-img{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .comment-img img{
        width: 2.1rem;
        height: 2.1rem;
    }
    .comment-guige{
        margin-top: 0.30rem;
        width: 1.15rem;
        height: 0.3rem;
        line-height: 0.3rem;
        background: #EFF0F1;
        color: #CCCED0;
        text-align: center;
        border-radius: 0.05rem;
    }
    /* 推荐 */
    .tuijian{
        padding: 0.3rem 0 0.3rem 0.3rem;
        margin: 0 0 0.98rem 0;
    }
    .tuijian-title{
        font-size: 0.28rem;
    }
    .tuijian-all{
        margin: 0.3rem 0.3rem 0 0;
        display: flex;
        white-space:nowrap;
        overflow-x:auto;
    }
    .tuijian-item{
        display: block;
        white-space:normal;
        border: 1px solid #e6e6e6;
        width: 2.6rem;
        margin-right: 0.3rem;
        border-radius: 0.2rem;
    }
    .tuijian-item img{
        width: 2.6rem;
        height: 2.1rem;
        border-top-left-radius:0.2rem;
        border-top-right-radius:0.2rem;

    }
    .tuijian-item-title{
        padding: 0.1rem;
    }
    .tuijian-item-bottom{
        display: flex;
        justify-content: space-between;
        padding: 0 0.1rem 0.2rem 0.1rem;
    }
    .tuijian-item-bottom span:nth-child(1){
        font-size: 0.24rem;
        color: #F52E67;
    }
    .tuijian-item-bottom span:nth-child(2){
        font-size: 0.24rem;
        color: #B3B5B8;
        text-decoration:line-through;
    }

    .goToDetails{
      margin-bottom: 0.98rem;
      text-align: center;
      padding: 0.42rem 0;
      color: #B3B5B8;
      background: #F5F6F7;
    }

    /*底部购物导航*/
    .goods-action{
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      width: 100%;
      height: 0.98rem;
      justify-content: space-between;
      align-items: center;
      background: #ffffff;
    }
    .goods-action-left{
      display: flex;
      height: 0.98rem;
      width: 43%;
      justify-content: space-between;
      align-items: center;
    }
    .goods-action-left-item{
      width: 33.333333%;
      text-align: center;
      font-size: 0.18rem;
    }
    .goods-action-right{
      display: flex;
      width: 57%;
      height: 0.98rem;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
    }
    .goods-action-right-item{
      width: 50%;
      height: 0.98rem;
      text-align: center;
      line-height: 0.98rem
    }
    .goods-action-right-item{
      width: 50%;
      height: 0.98rem;
      text-align: center;
      color: #ffffff;
    }
    .goods-action-right-item-left{
      line-height: 0.98rem;
      background: #22262F;
      font-size: 0.28rem;
    }
    .goods-action-right-item-right{
      background: #FF5367;
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center;     /* 垂直居中 */
    }
    .goods-action-right-d span{
      display: block;
      line-height: 0.28rem;
    }
    .goods-action-right-d span:first-of-type{
      font-size: 0.28rem;
    }
    .goods-action-right-d span:last-of-type{
      margin-top: 0.06rem;
      font-size: 0.14rem;
    }




    /* 选择产品规格弹窗 */
    .pruduct-guige{
        position: fixed;
        z-index: 99;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.5)
    }

    .guige-content{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 9.4rem;
        background: #fff;
        border-top-left-radius: 0.2rem;
        border-top-right-radius: 0.2rem;

    }

    .guige-content-top{
        padding: 0.3rem;
        padding-bottom: 0;
        display: flex;
        justify-content: space-between;
    }
    .guige-content-top img{
        width: 2.28rem;
        height: 2.28rem;
    }
    .guige-content-top-left{
        display: flex;
        align-items: center;
    }
    .cross-icon{
      font-weight: 600;
      font-size: 0.4rem;
      color: #D9DBE0;
    }
    .guige-prise{
        margin-left: 0.43rem;
    }
    .guige-prise-number span:nth-child(1){
        font-size: 0.34rem;
        color: #F52E67
    }
    .guige-prise-number span:nth-child(2){
        font-size: 0.26rem;
        color: #B3B5B8;
        text-decoration:line-through;
        margin-left: 0.2rem;
    }
    .kucun{
        font-size: 0.3rem;
        color: #B3B5B8;
    }
    /* 选择颜色 */
    .pruduct-guige-color{
        padding: 0 0.3rem;
        font-size: 0.28rem;
        margin-top: 0.3rem;
    }
    .choosecolor{
        margin-top: 0.2rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .choosecolor span{
        display: inline-block;
        margin: 0 0.5rem 0 0 ;
        width: 1.5rem;
        height: 0.56rem;
        line-height: 0.56rem;
        border-radius:0.1rem;
        color:white;
        background: #E3E2E2;
        font-size: 0.28rem;
        text-align: center;
        margin-bottom: 0.1rem;
    }
    .choosecolor-active{
        color: white !important;
        background: #F52E67 !important;
    }
    /* 选择尺码 */
    .pruduct-guige-size{
        padding: 0 0.3rem;
        font-size: 0.28rem;
        margin-top: 0.3rem;
    }
    .choosesize{
        margin-top: 0.2rem;
    }
    .choosesize span{
        display: inline-block;
        margin: 0 0.5rem 0 0 ;
        width: 1.5rem;
        height: 0.56rem;
        line-height: 0.56rem;
        border-radius:0.1rem;
        font-size: 0.28rem;
        text-align: center;
        margin-bottom: 0.1rem;
        border: 1px solid #e6e6e6;
        color: #C9CACC;
    }
    .choosesize-active{
        color: #F52E67 !important;
        border-color: #F52E67 !important;
    }
    .product-shuliang{
        display: flex;
        justify-content: space-between;
    }
    .product-shuliang{
        margin-top: 0.5rem;
        padding:0 0.3rem;
        font-size: 0.28rem;
   }
   /* 购买按钮 */
   .pay-button{
       position: fixed;
       display: flex;
       width: 100%;
       bottom: 0;
       height: 1rem;
   }
   .pay-button a{
       line-height: 1rem;
       text-align: center;
       font-size: 0.28rem;
   }
   .pay-button a:nth-child(1){
       flex: 1;
       background:#2D3540;
       color: white;
   }
   .pay-button a:nth-child(2){
       flex: 1;
       background:#F52E67;
       color: white;
   }
   /* 优惠弹窗 */
    .pruduct-youhui{
        position: fixed;
        z-index: 99;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.5)
    }

    .youhui-content{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 5.66rem;
        background: #fff;
        border-top-left-radius: 0.2rem;
        border-top-right-radius: 0.2rem;

    }
    .youhui-content-top{
        height: 0.8rem;
        line-height: 0.8rem;
        font-size: 0.32rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.3rem;
        border-bottom: 1px solid #e6e6e6;
    }
    .youhui-content-bottom{
        text-align: center;
    }
    .youhui-content-bottom img{
        width: 2.4rem;
        height: 2.2rem;
    }
    .youhui-content-bottom p:nth-child(2){
        font-size: 0.3rem;
    }
    .youhui-content-bottom p:nth-child(2) span{
        color: #F52E67
    }
    .youhui-content-bottom p:nth-child(3){
        font-size: 0.3rem;
        margin-top: 0.25rem;
        color: #B3B5B8
    }
    /* <!-- 服务保障弹窗 --> */
    .pruduct-fuwu{
        position: fixed;
        z-index: 99;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.5)
    }

    .fuwu-content{
        position: fixed;
        bottom: 0;
        width: 100%;
        height:8.71rem;
        background: #fff;
        border-top-left-radius: 0.2rem;
        border-top-right-radius: 0.2rem;

    }
    .fuwu-content-top{
        height: 0.8rem;
        line-height: 0.8rem;
        font-size: 0.32rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.3rem;
        border-bottom: 1px solid #e6e6e6;
    }
    .fuwu-all{
        padding: 0.3rem;
        font-size: 0.3rem;

    }
    .fuwu-item{
        margin-bottom: 0.5rem;
    }
    .fuwu-item-top{
        display: flex;
        align-items: center;
    }
    .fuwu-item-top span{
        display: inline-block;
    }
    .fuwu-item-top span:nth-child(1){
        width: 0.1rem;
        height: 0.1rem;
        background: #F52E67;
        margin-right: 0.1rem;
    }
    .fuwu-item-bottom{
        color: #B3B5B8;
        font-size: 0.28rem;
    }
    .fuwu-button{
        height: 1.8rem;
        text-align: center;
        line-height: 1.45rem;
        font-size: 0.32rem;
        color: white;
        background-image: url(../../assets/button.png) ;
        background-size: 100% 100%;
    }
    .CustomerService{
      position: relative;
      width: 5.5rem;
      margin: 0 auto;
      padding:0.3rem 0.5rem 0.3rem 0.5rem;
    }
    .CustomerService-c{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin: 0.2rem 0;
      padding: 0.2rem 0.3rem;
      border: 1px solid #EFF1F3;
    }
</style>
<style>
/*商品详情图片*/
.details-img-337854828{
  width: 100%;
}
.details-img-337854828 img{
  display: block;
  width: 100%;
}
.van-dialog__confirm, .van-dialog__confirm:active{
  color: #FF5367;
}
/*商品详情图片*/
</style>
